<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<%@ taglib prefix="sb" uri="/struts-bootstrap-tags"%>
<sb:head includeScripts="false" includeScriptsValidation="false" includeStyles="false" includeStylesResponsive="true" />
<s:set id="contextPath"
	value="#request.get('javax.servlet.forward.context_path')" />
<script type="text/javascript">
<!--
	$(function() {
		//$('.datepicker').datepicker();
	   /*  $('#myModal').modal({
	        keyboard: false,
	        remote:true
	       }); */
		
   	});
//-->
</script>
<div class="tabbable bg-red">
  <ul class="nav nav-tabs">
    <li class="active"><a href="#tab1" data-toggle="tab">ข้อมูลพื้นฐาน</a></li>
    <li><a href="#tab2" data-toggle="tab">หมุด 1</a></li>
  </ul>
  <s:form action="index" enctype="multipart/form-data" theme="bootstrap"
				cssClass="form-horizontal">	
  <div class="tab-content">
  	<!-- TAB 1  -->
    <div class="tab-pane active" id="tab1">     	
					<div class="row-fluid">
						<div class="span8">
							<div class="control-group">
								<div class="controls-row  float-left">
									<label class="control-label control-label-fm" for="projectName">&nbsp;ชื่อโครงการ&nbsp; <i
										class="icon-info-sign s2b_tooltip" title="ใส่ชื่อโครงการ"></i>
									</label> <input type="text" name="projectName" value="" id="projectName"
										class="input-medium" />
								</div>
								<div class="controls-row">
									<label class="control-label control-label-fm" for="rdrouteId">&nbsp;รหัสสายทาง&nbsp;<i
										class="icon-info-sign s2b_tooltip" title="ใส่รหัสสายทาง"></i>
									</label> <input type="text" name="rdrouteId" value="" id="rdrouteId"
										class="input-medium" />
								</div>
							</div>							
							<div class="clear"></div>
							<div class="control-group">
								<div class="controls-row  float-left">
									<label class="control-label control-label-fm" for="rdrouteName">&nbsp;ชื่อสายทาง&nbsp;<i
										class="icon-info-sign s2b_tooltip" title="ใส่ชื่อสายทาง"></i>
									</label> <input type="text" name="rdrouteName" value="" id="rdrouteName"
										class="input-medium" />
								</div>
							</div>
							<div class="clear"></div>
							<div class="control-group">
								<div class="controls-row  float-left">
									<label class="control-label control-label-fm" for="province">&nbsp;จังหวัด&nbsp; <i
										class="icon-info-sign s2b_tooltip" title="เลือกจังหวัด"></i>
									</label> <select style="width: 160px" id="province">
												<option value="x1">กรุงเทพมหานคร</option>
											</select>
								</div>
								<div class="controls-row  float-left">
									<label class="control-label control-label-fm" for="index_name">&nbsp;อำเภอ&nbsp; <i
										class="icon-info-sign s2b_tooltip" title="เลือกอำเภอ"></i>
									</label> <select style="width: 160px">
												<option value="x1">อำเภอ</option>
											</select>
								</div>
								<div class="controls-row  float-left">
									<label class="control-label control-label-fm" for="tumbol">&nbsp;ตำบล&nbsp; <i
										class="icon-info-sign s2b_tooltip" title="เลือกตำบล"></i>
									</label> <input type="text" name="tumbol" value="" id="tumbol"
										class="input-medium" />
								</div>
								</div>
								</div>
								</div>
								
    </div>
    <div class="tab-pane" id="tab2">   
<!-- TAB 2 -->
			<s:actionerror theme="bootstrap" />
			<s:actionmessage theme="bootstrap" />
			<s:fielderror theme="bootstrap" />
			
				<legend><span class="title">ข้อมูลนำเข้าโครงการวางหมุดหลักฐาน GPS และโครงการอื่นๆ</span></legend>		
					<div class="row-fluid">
						<div class="span8">
							<div class="control-group">
								<div class="controls-row  float-left">
									<label class="control-label control-label-fm" for="projectName">&nbsp;ชื่อโครงการ&nbsp; <i
										class="icon-info-sign s2b_tooltip" title="ใส่ชื่อโครงการ"></i>
									</label> <input type="text" name="projectName" value="" id="projectName"
										class="input-medium" />
								</div>
								<div class="controls-row">
									<label class="control-label control-label-fm" for="rdrouteId">&nbsp;รหัสสายทาง&nbsp;<i
										class="icon-info-sign s2b_tooltip" title="ใส่รหัสสายทาง"></i>
									</label> <input type="text" name="rdrouteId" value="" id="rdrouteId"
										class="input-medium" />
								</div>
							</div>							
							<div class="clear"></div>
							<div class="control-group">
								<div class="controls-row  float-left">
									<label class="control-label control-label-fm" for="rdrouteName">&nbsp;ชื่อสายทาง&nbsp;<i
										class="icon-info-sign s2b_tooltip" title="ใส่ชื่อสายทาง"></i>
									</label> <input type="text" name="rdrouteName" value="" id="rdrouteName"
										class="input-medium" />
								</div>
							</div>
							<div class="clear"></div>
							<div class="control-group">
								<div class="controls-row  float-left">
									<label class="control-label control-label-fm" for="province">&nbsp;จังหวัด&nbsp; <i
										class="icon-info-sign s2b_tooltip" title="เลือกจังหวัด"></i>
									</label> <select style="width: 160px" id="province">
												<option value="x1">กรุงเทพมหานคร</option>
											</select>
								</div>
								<div class="controls-row">
									<label class="control-label control-label-fm" for="index_name1">&nbsp;ค่าพิกัด N&nbsp;<i
										class="icon-info-sign s2b_tooltip" title="ใส่ค่าพิกัด"></i>
									</label> <input type="text" name="lat" value="" id="rdrouteId"
										class="input-medium" />
								</div>
							</div>
							<div class="clear"></div>
							<div class="control-group">
								<div class="controls-row  float-left">
									<label class="control-label control-label-fm" for="index_name">&nbsp;อำเภอ&nbsp; <i
										class="icon-info-sign s2b_tooltip" title="เลือกอำเภอ"></i>
									</label> <select style="width: 160px">
												<option value="x1">อำเภอ</option>
											</select>
								</div>
								<div class="controls-row">
									<label class="control-label control-label-fm" for="index_name1">&nbsp;ค่าพิกัด E &nbsp;<i
										class="icon-info-sign s2b_tooltip" title="ใส่ค่าพิกัด"></i>
									</label> <input type="text" name="lng" value="" id="rdrouteId"
										class="input-medium" />
								</div>
							</div>
							<div class="clear"></div>
							<div class="control-group">						
								<div class="controls-row  float-left">
									<label class="control-label control-label-fm" for="tumbol">&nbsp;ตำบล&nbsp; <i
										class="icon-info-sign s2b_tooltip" title="เลือกตำบล"></i>
									</label> <input type="text" name="tumbol" value="" id="tumbol"
										class="input-medium" />
								</div>
								<div class="controls-row">
									<label class="control-label control-label-fm" for="zindex">&nbsp;ค่าระดับความสูง&nbsp;<i
										class="icon-info-sign s2b_tooltip" title="ใส่ค่าระดับความสูง"></i>
									</label> <input type="text" name="rdrouteId" value="" id="zindex"
										class="input-medium" />
								</div>
							</div>
							<div class="clear"></div>					
							<div class="control-group">
								<div class="controls-row  float-left">
									<label class="control-label control-label-fm" for="refcord">&nbsp;ระยะพิกัดอ้างอิง&nbsp; <i
										class="icon-info-sign s2b_tooltip" title="ใส่ระยะพิกัดอ้างอิง"></i>
									</label> <input type="text" name="refcord" value="" id="refcord"
										class="input-medium" />
								</div>
								<div class="controls-row">
									<label class="control-label control-label-fm" for="pinNo">&nbsp;หมายเลขหมุด&nbsp;<i
										class="icon-info-sign s2b_tooltip" title="ใส่หมายเลขหมุด"></i>
									</label> <input type="text" name="pinNo" value="" id="pinNo"
										class="input-medium" />
								</div>
							</div>
							<div class="clear"></div>	
						</div>
						<div class="span3" >
							<div class="control-group">
								<div class="controls-row">
									<img alt="" class="img-polaroid"
										src="<s:property value="contextPath"/>/assets/default/img/noimage.jpg"> </div>
										<div class="controls-row" align="center">
										 <span class="btn btn-success fileinput-button">
										        <i class="icon-plus icon-white"></i>
										        <span>Select files...</span>							       
										        <input id="fileupload" type="file" name="files[]" multiple>
				   							</span>
				                       </div>
							</div>
						</div>
				</div>
				<legend><span class="title">ชื่อโครงสร้างที่วางหมุดหลักฐาน</span></legend>
				<div class="row-fluid">
					<div class="span4">
						<div class="control-group">
								<div class="controls-row">
									<label class="control-label control-label-fm" for="bridgeName">&nbsp;ชื่อสะพาน&nbsp; <i
										class="icon-info-sign s2b_tooltip" title="ใส่ชื่อสะพาน"></i>
									</label> <input type="text" name="bridgeName" value="" id="bridgeName"
										class="input-medium" />
								</div>						
						</div>
						<div class="control-group">
								<div class="controls-row">
									<label class="control-label control-label-fm" for="waterwayName">&nbsp;ชื่อลำน้ำ&nbsp; <i
										class="icon-info-sign s2b_tooltip" title="ใส่ชื่อลำน้ำ"></i>
									</label> <input type="text" name="waterwayName" id="waterwayName"
										class="input-medium" />
								</div>						
						</div>
						<div class="clear"></div>
					</div>
					<div class="span4">
						<div class="control-group">
								<div class="controls-row">
									<label class="control-label control-label-fm" for="lenght">&nbsp;ความยาว&nbsp; <i
										class="icon-info-sign s2b_tooltip" title="ความยาว"></i>
									</label> <input type="text" name="lenght" value="" id="lenght"
										class="input-medium" />
								</div>						
						</div>
						<div class="control-group">
								<div class="controls-row">
									<label class="control-label control-label-fm" for="width">&nbsp;ความกว้าง&nbsp; <i
										class="icon-info-sign s2b_tooltip" title="ความกว้าง"></i>
									</label> <input type="text" name="width" id="width"
										class="input-medium" />
								</div>						
						</div>
						<div class="clear"></div>
					</div>
					<div class="span4">
						<div class="control-group">
								<div class="controls-row">
									<label class="control-label control-label-fm" for="maxwaterWidth">&nbsp;ระดับน้ำสูงสุด&nbsp; <i
										class="icon-info-sign s2b_tooltip" title="ใส่ระดับน้ำสูงสุด"></i>
									</label> <input type="text" name="maxwaterWidth" id="maxwaterWidth"	class="input-medium" />
								</div>						
						</div>
						<div class="clear"></div>
					</div>
				</div>
				<legend><span class="title">รายละเอียด ผู้สำรวจ</span></legend>
				<div class="row-fluid">
					<div class="span4">
						<div class="control-group">
								<div class="controls-row">
									<label class="control-label control-label-fm" for="survayUsr">&nbsp;ชื่อผู้สำรวจ&nbsp; <i
										class="icon-info-sign s2b_tooltip" title="ชื่อผู้สำรวจ"></i>
									</label> <input type="text" name="survayUsr" id="survayUsr"
										class="input-medium" />
								</div>
								<div class="clear"></div>						
						</div>
						<div class="control-group">
								<div class="controls-row">
									<label class="control-label control-label-fm" for="startTime">&nbsp;เวลาเริ่มต้น&nbsp; <i
										class="icon-info-sign s2b_tooltip" title="ใส่เวลาเริ่มต้น"></i>
									</label> <input type="text" name="startTime" id="startTime"
										class="input-medium" />
								</div>
								<div class="clear"></div>						
						</div>
					</div>
					<div class="span4">
						<div class="control-group">
								<div class="controls-row">
									<label class="control-label control-label-fm" for="survayDate">&nbsp;วันทีสำรวจ&nbsp; <i
										class="icon-info-sign s2b_tooltip" title="วันทีสำรวจ"></i>
									</label>
									<input type="text" id="survayDate" name="survayDate" class="datepicker input-medium" placeholder="วันทีสำรวจ">
								</div>
								<div class="clear"></div>						
						</div>
						<div class="control-group">
								<div class="controls-row">
									<label class="control-label  control-label-fm" for="endTime">&nbsp;เวลาสิ้นสุด&nbsp; <i
										class="icon-info-sign s2b_tooltip" title="ใส่เวลาสิ้นสุด"></i>
									</label> 
									<input type="text" name="endTime" id="endTime" class="input-medium" />
								</div>
								<div class="clear"></div>						
						</div>
					</div>
				</div>
				<legend><span class="title">รายละเอียด ของหมุด</span></legend>
				<div class="row-fluid">
					<div class="span4">
						 <s:textarea
			                        tooltip="คำอธิบายตำแหน่ง"
			                        label="คำอธิบายตำแหน่ง"
			                        name="remark"
			                        cols="20"
			                        rows="3"/>
					</div>
				</div>
				<legend><span class="title">ภาพหมุดหลักฐานและโครงสร้างที่วางหมุด</span></legend>
				<div class="row-fluid">
					<div class="span4">
						<div class="control-group">
								<div class="controls-row">
									<img alt="" class="img-polaroid"
										src="<s:property value="contextPath"/>/assets/default/img/noimage.jpg"> </div>
										<div class="controls-row" align="center">
										 <span class="btn btn-success fileinput-button">
										        <i class="icon-plus icon-white"></i>
										        <span>Select files...</span>							       
										        <input id="fileupload" type="file" name="files[]" multiple>
				   							</span>
				                       </div>
							</div>
							<div class="control-group">
								<div class="controls-row">
									<img alt="" class="img-polaroid"
										src="<s:property value="contextPath"/>/assets/default/img/noimage.jpg"> </div>
										<div class="controls-row" align="center">
										 <span class="btn btn-success fileinput-button">
										        <i class="icon-plus icon-white"></i>
										        <span>Select files...</span>							       
										        <input id="fileupload" type="file" name="files[]" multiple>
				   							</span>
				                       </div>
							</div>
					</div>
					<div class="span4">
						<div class="control-group">
								<div class="controls-row">
									<img alt="" class="img-polaroid"
										src="<s:property value="contextPath"/>/assets/default/img/noimage.jpg"> </div>
										<div class="controls-row" align="center">
										 <span class="btn btn-success fileinput-button">
										        <i class="icon-plus icon-white"></i>
										        <span>Select files...</span>							       
										        <input id="fileupload" type="file" name="files[]" multiple>
				   							</span>
				                       </div>
							</div>
							<div class="control-group">
								<div class="controls-row">
									<img alt="" class="img-polaroid"
										src="<s:property value="contextPath"/>/assets/default/img/noimage.jpg"> </div>
										<div class="controls-row" align="center">
										 <span class="btn btn-success fileinput-button">
										        <i class="icon-plus icon-white"></i>
										        <span>Select files...</span>							       
										        <input id="fileupload" type="file" name="files[]" multiple>
				   							</span>
				                       </div>
							</div>
					</div>
					<div class="span4">
						<div class="control-group">
								<div class="controls-row">
									<img alt="" class="img-polaroid"
										src="<s:property value="contextPath"/>/assets/default/img/noimage.jpg"> </div>
										<div class="controls-row" align="center">
										 <span class="btn btn-success fileinput-button">
										        <i class="icon-plus icon-white"></i>
										        <span>Select files...</span>							       
										        <input id="fileupload" type="file" name="files[]" multiple>
				   							</span>
				                       </div>
							</div>
							<div class="control-group">
								<div class="controls-row">
									<img alt="" class="img-polaroid"
										src="<s:property value="contextPath"/>/assets/default/img/noimage.jpg"> </div>
										<div class="controls-row" align="center">
										 <span class="btn btn-success fileinput-button">
										        <i class="icon-plus icon-white"></i>
										        <span>Select files...</span>							       
										        <input id="fileupload" type="file" name="files[]" multiple>
				   							</span>
				                       </div>
							</div>
					</div>
				</div>	
			
 		</div>
 	
  </div>
  </s:form>
</div>

<script type="text/javascript" src="<s:property value="%{contextPath}"/>/assets/default/js/bootstrap-datepicker.js"></script>
<script src='<s:property value="contextPath"/>/assets/default/js/jq/fileupload/vendor/jquery.ui.widget.js'></script>
<script src='<s:property value="contextPath"/>/assets/default/js/jq/fileupload/load-image.min.js'></script>
<script src='<s:property value="contextPath"/>/assets/default/js/jq/fileupload/canvas-to-blob.min.js'></script>
<script src='<s:property value="contextPath"/>/assets/default/js/jq/fileupload/jquery.iframe-transport.js'></script>
<script src='<s:property value="contextPath"/>/assets/default/js/jq/fileupload/jquery.fileupload.js'></script>
<script src='<s:property value="contextPath"/>/assets/default/js/jq/fileupload/jquery.fileupload-process.js'></script>
<script src='<s:property value="contextPath"/>/assets/default/js/jq/fileupload/jquery.fileupload-image.js'></script>
<script src='<s:property value="contextPath"/>/assets/default/js/jq/fileupload/jquery.fileupload-audio.js'></script>
<script src='<s:property value="contextPath"/>/assets/default/js/jq/fileupload/jquery.fileupload-video.js'></script>
<script src='<s:property value="contextPath"/>/assets/default/js/jq/fileupload/jquery.fileupload-validate.js'></script>
<script type="text/javascript">
<!--
$(function () {
	    'use strict';
	    // Change this to the location of your server-side upload handler:
	    var url = window.location.hostname === 'blueimp.github.io' ?
	                '//jquery-file-upload.appspot.com/' : 'server/php/',
	        uploadButton = $('<button/>')
	            .addClass('btn')
	            .prop('disabled', true)
	            .text('Processing...')
	            .on('click', function () {
	                var $this = $(this),
	                    data = $this.data();
	                $this
	                    .off('click')
	                    .text('Abort')
	                    .on('click', function () {
	                        $this.remove();
	                        data.abort();
	                    });
	                data.submit().always(function () {
	                    $this.remove();
	                });
	            });
	    $('#fileupload').fileupload({
	        url: url,
	        dataType: 'json',
	        autoUpload: false,
	        acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
	        maxFileSize: 5000000, // 5 MB
	        // Enable image resizing, except for Android and Opera,
	        // which actually support image resizing, but fail to
	        // send Blob objects via XHR requests:
	        disableImageResize: /Android(?!.*Chrome)|Opera/
	            .test(window.navigator.userAgent),
	        previewMaxWidth: 100,
	        previewMaxHeight: 100,
	        previewCrop: true
	    }).on('fileuploadadd', function (e, data) {
			$('#files').empty();
	       data.context = $('<div/>').appendTo('#files');		
	       $.each(data.files, function (index, file) {
	            var node = $('<p/>')
	                    .append($('<span/>').text(file.name));
	            if (!index) {
	                node
	                    .append('<br>')
	                    .append(uploadButton.clone(true).data(data));
	            }
	            node.appendTo(data.context);
	        });
			
	    }).on('fileuploadprocessalways', function (e, data) {
	        var index = data.index,
	            file = data.files[index],
	            node = $(data.context.children()[index]);
	        if (file.preview) {
	            node
	                .prepend('<br>')
	                .prepend(file.preview);
	        }
	        if (file.error) {
	            node
	                .append('<br>')
	                .append(file.error);
	        }
	        if (index + 1 === data.files.length) {
	            data.context.find('button')
	                .text('Upload')
	                .prop('disabled', !!data.files.error);
	        }
	    }).on('fileuploadprogressall', function (e, data) {
	        var progress = parseInt(data.loaded / data.total * 100, 10);
	        $('#progress .bar').css(
	            'width',
	            progress + '%'
	        );
	    }).on('fileuploaddone', function (e, data) {
	        $.each(data.result.files, function (index, file) {
	            var link = $('<a>')
	                .attr('target', '_blank')
	                .prop('href', file.url);
	            $(data.context.children()[index])
	                .wrap(link);
	        });
	    }).on('fileuploadfail', function (e, data) {
	        $.each(data.result.files, function (index, file) {
	            var error = $('<span/>').text(file.error);
	            $(data.context.children()[index])
	                .append('<br>')
	                .append(error);
	        });
	    }).prop('disabled', !$.support.fileInput)
	        .parent().addClass($.support.fileInput ? undefined : 'disabled');
	});
//-->
</script>